<!-- 服务记录-详情-组件模板 -->
<template>
	<view class="detailDoms">
		<view class="formDoms">
			<view class="flexDom marginBottom20">
				<text class="color666">门店名称：</text>
				<text class="flexOne textRight">{{orderInfo.shopName}}</text>
			</view>
			<view class="flexDom marginBottom20">
				<text class="color666">客户名称：</text>
				<text class="flexOne textRight">{{orderInfo.customerName}}</text>
			</view>
			<view class="flexDom marginBottom20">
				<text class="marginRight30 color666">服务人：</text>
				<text class="flexOne textRight">{{orderInfo.userName}}</text>
			</view>
			<view class="flexDom marginBottom20">
				<text class="marginRight30 color666">服务日期：</text>
				<text class="flexOne textRight">
					<uni-dateformat :date="orderInfo.createdTime" format="yyyy-MM-dd"></uni-dateformat>
				</text>
			</view>
			<view class="flexDom marginBottom20">
				<text class="color666 flexOne">备注：</text>
				<text>{{orderInfo.remark}}</text>
			</view>
			<view v-if="orderInfo.orderDtlList.length > 0" class="marginBottom20">
				<view class="marginBottom20 fontWeight">套组核销</view>
				<view>
					<view v-for="(item,index) in orderInfo.orderDtlList" :key="index" class="itemDoms">
						<!-- 列表信息 -->
						<view class="flexDom marginBottom20">
							<text class="marginRight30 color666">商品：</text>
							<text class="flexOne textRight">{{item.productName}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">服务总次数：</text>
							<text>{{item.totalCount?item.totalCount:'未设置'}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">剩余服务次数：</text>
							<text class="colorRed">{{item.remainCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">本次服务次数：</text>
							<text>{{item.useCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">备注：</text>
							<text>{{item.remark}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderInfo.expCardList.length > 0" class="marginBottom20">
				<view class="marginBottom20 fontWeight">体验卡核销</view>
				<view>
					<view v-for="(item,index) in orderInfo.expCardList" :key="index" class="itemDoms">
						<!-- 列表信息 -->
						<view class="flexDom marginBottom20">
							<text class="marginRight30 color666">项目名称：</text>
							<text class="flexOne textRight">{{item.projectName}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">服务总次数：</text>
							<text>{{item.totalCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">剩余服务次数：</text>
							<text>{{item.totalCount - item.useCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">本次服务次数：</text>
							<text>{{item.useCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">备注：</text>
							<text>{{item.remark}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderInfo.extraProjectList.length > 0" class="marginBottom20">
				<view class="marginBottom20 fontWeight">附加项目核销</view>
				<view>
					<view v-for="(item,index) in orderInfo.extraProjectList" :key="index" class="itemDoms">
						<!-- 列表信息 -->
						<view class="flexDom marginBottom20">
							<text class="marginRight30 color666">项目名称：</text>
							<text class="flexOne textRight">{{item.extraProjectName}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">本次服务次数：</text>
							<text>{{item.useCount}}</text>
						</view>
						<view class="flexDom marginBottom20">
							<text class="flexOne color666">备注：</text>
							<text>{{item.remark}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderInfo.signUrl" class="marginBottom20">
				<view class="marginBottom20 fontWeight">客户签字</view>
				<view>
					<image :src="orderInfo.signUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',   // 单子ID
				orderInfo: {
					orderDtlList: [],  		//  添加套组核销
					expCardList: [],  		// 添加体验卡核销
					extraProjectList: []  	// 添加附加项目核销
				}
			}
		},
		onLoad(options) {
			// 福州
			if(options.id) {
				this.orderId = options.id;
				// 初始化-数据
				this.initData();
			}
		},
		methods: {
			
			/** 初始化-表单函数 */
			initData() {
				let urls = this.$apiNames.KH_SIGNSERVICE_DETAIL + this.orderId;
				// 请求门店列表-api
				this.$myHttps(urls).then(res => {
					// console.log("详情数据：", res);
					if(res.code == 0) {
						// 赋值
						this.orderInfo =  res.serviceSign;
					} else {
						this.$Msg(res.msg);
					}
				}).catch(err => {
					this.orderInfo = {
						"orderDtlList":[{"id":1,"serviceSignId":1,"userId":1,"userName":"超级管理员","orderDtlId":55,"shopId":2,"shopName":"克丽缇娜","customerName":"打瞌睡","productId":1,"productName":"面膜A","useCount":1,"totalCount":11,"remainCount":6,"serviceFee":1,"singleServiceFee":null,"remark":"发撒旦法是否萨达发","createdTime":1761793439000,"updateTime":1761793439000,"del":0}],
						"expCardList":[],
						"extraProjectList":[],
						"sign":null,
						"id":1,
						"userId":1,
						"userName":"超级管理员",
						"shopId":2,
						"shopName":"克丽缇娜",
						"customerName":"打瞌睡",
						"signUrl":"http://www.kanghongcare.com/kanghong/uploadfile/2025-10-30/c5300fb7-1a7e-429a-9497-4828a1b8f517.jpg",
						"remark":"VS大法撒旦发撒旦法",
						"createdTime":1761793439000,
						"updateTime":1761793439000,
						"del":0,
					};
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detailDoms {
		.formDoms {
			background-color: #ffffff;
			border-radius: 10upx;
			box-sizing: border-box;
			padding: 40upx 20upx 140upx;
			margin: 30upx 30upx 100upx;
		}
		.itemDoms {
			padding: 20upx 20upx 0 20upx;
			margin-bottom: 30upx;
			border: 1px solid #eeeeee;
			border-radius: 10upx;
		}
	}
</style>